/*
 * @Author: xiaosihan 
 * @Date: 2023-08-06 00:52:13 
 * @Last Modified by: xiehangyun
 * @Last Modified time: 2025-02-21 18:57:00
 */


import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./editorScaleContor.module.less";
import editorStore from "@/editorComponent/editorStore";
import { Button, Slider, Tooltip } from "antd";
import Transition from "three-base/Transition";
import addSVG from "./add.svg";
import subSVG from "./sub.svg";
import adapterSVG from "./adapter.svg";

interface Iprops {
}

// 编辑器缩放控制器
export default function EditorScaleContor() {

  const dom = useRef<HTMLDivElement | null>(null);
  const [data, setData] = useState({});
  const [scale, setScale] = useState(editorStore.scale);
  const [maxScale, setMaxScale] = useState(editorStore.maxScale);

  useEffect(() => autorun(() => {
    setScale(editorStore.scale);
    setMaxScale(editorStore.maxScale);
  }), []);

  const adapter = () => {
    const transition = new Transition({ scale: editorStore.scale });
    transition.onChange(({ scale }) => {
      editorStore.setScale(scale);
    });
    transition.set({ scale: editorStore.maxScale });
  }

  const add = () => {
    const transition = new Transition({ scale: editorStore.scale });
    transition.onChange(({ scale }) => {
      editorStore.setScale(scale);
    });
    transition.set({ scale: Math.min(editorStore.maxScale, editorStore.scale + 10) });
  }

  const sub = () => {
    const transition = new Transition({ scale: editorStore.scale });
    transition.onChange(({ scale }) => {
      editorStore.setScale(scale);
    });
    transition.set({ scale: Math.max(20, editorStore.scale - 10) });
  }

  return (
    <div className={styles.editorScaleContor} >

      <Tooltip
        placement="left"
        title={"适配"}
        arrow={true}
      >
        <img
          alt=""
          src={adapterSVG}
          onClick={() => adapter()}
          className={styles.adapter}
        />
      </Tooltip>

      <Tooltip
        placement="left"
        title={"放大"}
        arrow={true}
      >
        <img
          alt=""
          onClick={() => add()}
          src={addSVG}
          className={styles.add}
        />
      </Tooltip>

      <Slider
        vertical
        className={styles.slider}
        min={20}
        max={maxScale}
        value={scale}
        onChange={v => {
          editorStore.setScale(v);
        }}
      />

      <Tooltip
        placement="left"
        title={"缩小"}
        arrow={true}
      >
        <img
          alt=""
          onClick={() => sub()}
          src={subSVG}
          className={styles.add}
        />
      </Tooltip>

    </div>
  );

}